<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar title="个人主页"></fa-navbar>
		<u-sticky :enable="false"><fa-user-header :expert="user_id != user.id" @send="sendMsg" :user="user" :showMore="user_id != user.id"></fa-user-header></u-sticky>
		<view class="u-p-30">
			<u-tabs
				:list="tabsList"
				:is-scroll="true"
				bg-color="#f4f6f8"
				active-color="#000"
				inactive-color="#000"
				:current="0"
				:active-item-style="{
					backgroundColor: '#fff',
					color: '#000',
					borderTopLeftRadius: '6rpx',
					borderTopRightRadius: '6rpx',
					boxShadow: '0 0 10px rgba(0, 87, 142, 0.1)'
				}"
				:bar-style="{ backgroundColor: 'rgb(255 255 255 / 0)' }"
			></u-tabs>
			<!-- 动态 -->
			<view class="comment u-m-b-2" v-for="(res, index) in feedList" :key="res.id">
				<view class="u-p-30 ne">
					<view class="left">
						<image :src="res.user && (res.user.id == user.id ?user.avatar:res.user.avatar)" mode="aspectFill"></image></view>
					<view class="right">
						<view class="top">
							<view class="name">
								<view class="">
									<text class="text-bold">{{res.user && (res.user.id == user.id ? '我' : res.user.nickname) }}</text>
									<text class="u-tips-color u-m-l-20">
										{{
											res.action == 'post_question'
												? '发布了问题'
												: res.action == 'post_article'
												? '发表了文章'
												: res.action == 'post_comment'
												? '发表了评论'
												: res.action == 'post_answer'
												? '对问题发布了答案'
												: res.action == 'adopt'
												? '采纳了的最佳答案'
												: res.action == 'collection'
												? '收藏了' + (res.type == 'question' ? '问题' : res.type == 'article' ? '文章' : '答案')
												: res.action == 'attention'
												? '关注了' + (res.type == 'question' ? '问题' : res.type == 'article' ? '文章' : '答案')
												: '感谢了' + (res.type == 'question' ? '问题' : res.type == 'article' ? '文章' : '答案')
										}}
									</text>
								</view>
								<view class="u-tips-color">{{ res.create_date }}</view>
							</view>
						</view>
						<view class="content" @click="goPage(res)">{{ res.title }}</view>
						<view class="blockquote u-tips-color u-line-5" @click="goPage(res)" v-if="res.content">{{ res.content }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="u-p-b-30"><u-loadmore bg-color="#f4f6f8" :status="has_more ? status : 'nomore'" /></view>
		<!-- 发送私信 -->
		<fa-send-msg :user-id="user_id" ref="faSend"></fa-send-msg>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{color:theme.bgColor}" :custom-style="{backgroundColor:theme.lightColor}"></u-back-top>
	</view>
</template>

<script>
export default {
	onLoad(e) {
		let query = this.$Route.query || e || {};
		console.log(query)
		this.user_id = query.user_id || 0;
		if (this.$store.state.user.isLogin) {
			this.getMyinfo();
		}
	},
	data() {
		return {
			user_id: 0,
			scrollTop: 0,
			tabsList: [
				{
					name: '最新动态'
				}
			],
			current: 0,
			commentList: [],
			user: {},
			feedList: [],
			page: 1,
			has_more: false,
			status: 'loadmore'
		};
	},
	methods: {
		change(index) {
			this.current = index;
		},
		goPage(res) {
			let url = res.url.replace('.html', '');
			url = url.split('/');
			let len = url.length;
			let id = url[len - 1];
			let methods = url[len - 2];
			this.$wanlshop.to(`/pages/community/${methods}/detail?id=${id}`)
		},
		sendMsg() {
			this.$refs.faSend.show();
		},
		getMyinfo: async function() {
			let res = await this.$api.getMyinfo({
				id: this.user_id,
				page: this.page
			});
			this.status = 'loadmore';
			// if (!res.code) {
			// 	this.$u.toast(res.msg);
			// 	return;
			// }
			this.has_more = res.data.feedList.current_page < res.data.feedList.last_page;
			this.user = res.data.user;
			this.$u.vuex('vuex_othen_user', res.data.user);
			this.feedList = this.feedList.concat(res.data.feedList.data);
			if (res.data.user.nickname) {
				uni.setNavigationBarTitle({
					title: res.data.user.nickname + '的主页'
				});
			}
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onReachBottom() {
		if (this.has_more) {
			this.status = 'loading';
			this.page++;
			this.getMyinfo();
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f4f6f8;
}

.u-row .u-btn {
	padding: 0 40rpx;
}

.comment {
	.ne {
		display: flex;
		background-color: #ffffff;

		.left {
			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #f2f2f2;
			}
		}

		.right {
			flex: 1;
			padding-left: 20rpx;
			font-size: 30rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;
			}

			.content {
				margin-bottom: 10rpx;
			}

			.blockquote {
				padding: 17rpx 34rpx 0 34rpx;
				margin: 0 0 34rpx;
				border-left: 10rpx solid #eeeeee;
			}
		}
	}
}

.right-item {
	margin: 0 20rpx;
	position: relative;
}

.sendMsg {
	width: 600rpx;
	height: 420rpx;

	.header {
		border-bottom: 1px solid #eee;
		background-color: #f8f8f8;
	}
}
</style>
